<template>
    <div class="travel_detail">
        <div class="title">{{detailData.title}}</div>
        <div class="tip">本产品由随心旅行公司提供服务，统一社会信用代码：---，经营许可证：---</div>
        <div class="travel_content">
            <div class="banner_box">
                <el-carousel height="360px">
                    <el-carousel-item v-for="item in detailData.pictrueList" :key="item">
                        <img :src="item.path" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="travel_detail">
                <div style="display: flex; justify-content: space-between">
                    <div>
                        <span style="padding-right: 20px; border-right: 1px solid #aaa">{{detailData.type}}</span>
                        <span style="padding-left: 15px">旅游路线: {{detailData.route || '--'}}</span>
                    </div>
                    <div class="sc_box" style="cursor: pointer">
                        <i class="el-icon-star-on" style="color: #3a8ee6" v-if="detailData.collect" @click="deleteCollect"></i>
                        <i class="el-icon-star-off" v-else @click="addCollect"></i>
                        收藏
                    </div>
                </div>
                <div class="price_box">
                    <div style="padding-top: 20px">
                        <div>
                            <span style="font-size: 16px">￥</span>{{detailData.price}}
                        </div>
                        <div style="font-size: 16px; margin-top: 25px; display: flex; align-items: center">
                            <span class="item_label" style="color: #999; margin-right: 10px">可享优惠:</span>
                            <span style="padding: 3px 6px; border: 1px solid #ff7802; color: #ff7802; border-radius: 3px">vip {{detailData.vipDiscount}}折</span>
                        </div>
                    </div>
                    <div class="btn_box">
                        <el-button round plain @click="buy">购买</el-button>
                    </div>
                </div>
                <div style="display: flex">
                    <span class="item_label" style="white-space: nowrap; margin-right: 10px; font-weight: bold">产品描述:</span>
                    <span style="line-height: 18px">{{detailData.description}}</span>
                </div>
            </div>

        </div>

        <div class="comment_box">
            <div class="comment_title">产品评价</div>
            <ul class="infinite-list" style="overflow:auto">
                <li v-for="(item,index) in detailData.appraiseList" :key="index" class="infinite-list-item">
                    <div style="display: flex; margin-bottom: 10px">
                        <iconSvg icon-class="user" width="20px" height="20px"></iconSvg><span style="margin-left: 5px">{{login_user}}</span>
                    </div>
                    <div class="user_pl">
                        {{item.userAppraise.context}}
                    </div>
                    <div class="admin_hf" v-if="item.adminAppraise">
                        {{item.adminAppraise.context}}
                    </div>
                </li>
            </ul>
        </div>

        <DialogTravelPay :dialogTravelPayShow.sync="dialogTravelPayShow" :propTravelInfo="detailData"></DialogTravelPay>
    </div>
</template>

<script>
    import {baseUrl} from "@/utils/config";
    import {travelInfoDetail, addCollect,deleteCollect} from '@/api/info'
    import DialogTravelPay from './components/DialogTravelPay'
    import { mapGetters } from 'vuex'
    export default {
      name: 'travelDetail',
      components: {
        DialogTravelPay
      },
      data() {
        return {
          infoId: '',
          detailData: {
            pictrueList: [
              'https://pic5.40017.cn/02/001/8e/0c/rBLkCFttCkCAWpTPAA55BmeYVNE755_568x360_00.jpg',
              'https://pic5.40017.cn/01/000/02/09/rBLkBlvEXfGATngpAAQZaBSQVVI727_568x360_00.jpg',
              'https://pic5.40017.cn/03/000/0e/0b/rB5oQFuwJsGAWufzAAOVptGlfjY613_568x360_00.jpg',
            ]
          },
          commentList: [],
          dialogTravelPayShow: false
        }
      },
      computed: {
        ...mapGetters(['login_user'])
      },
      created() {
        this.infoId = this.$route.query.infoId
        this.travelInfoDetail()

      },
      methods: {
        goLogin() {
          if (!this.login_user) {
            this.$router.push({
              path: '/login'
            })
            return true
          }
        },
        handlePictureList() {
          this.detailData.pictrueList.forEach(item => {
            item.path = `${baseUrl}${item.path}`
          })
        },
        travelInfoDetail() {
          let params = {
            infoId: this.infoId
          }
          travelInfoDetail(params).then(res => {
            this.detailData = res
            this.handlePictureList()
          })
        },
        buy() {
          if(this.goLogin()) return
          this.dialogTravelPayShow = true
        },
        addCollect() {
          if(this.goLogin()) return
          let params = {
            infoId: this.infoId
          }
          addCollect(params).then(res => {
            this.$set(this.detailData, 'collect', true)
            this.$message.success('收藏成功')
          })
        },
        deleteCollect() {
          if(this.goLogin()) return
          let params = {
            infoId: this.infoId
          }
          deleteCollect(params).then(res => {
            this.$set(this.detailData, 'collect', false)
            this.$message.success('取消收藏成功')
          })
        }
      }
    }
</script>

<style lang="scss">
    .travel_detail {
        padding: 20px;
        flex: 1;
        .sc_box {
            .el-icon-star-off {
                &:hover {
                    color: #ff6602;
                }
            }
        }
        .title {
            font-size: 22px;
            margin-bottom: 10px;
            font-weight: bold;
        }
        &>.tip {
            font-size: 14px;
            color: #999;
            margin-bottom: 10px;
        }
        .travel_content {
            display: flex;
            flex: 1;
            .banner_box {
                width: 568px;
                .el-carousel {
                    width: 568px;
                    overflow: hidden;
                }
            }
            .price_box {
                height: 147px;
                margin-left: -20px;
                padding-left: 20px;
                margin-bottom: 20px;
                width: 100%;
                margin-top: 20px;
                background-color: #fff5f2;
                font-family: arial;
                font-size: 40px;
                font-weight: 700;
                color: #ff6602;
                position: relative;
                .btn_box {
                    position: absolute;
                    right: 10px;
                    bottom: 10px;
                    .el-button{
                        color: #ff7802;
                        border-color: #ff7802;
                    }
                }
            }
        }

        .comment_box {
            margin-top: 20px;
            .comment_title {
                font-size: 20px;
                font-weight: bold;
                padding: 10px 0;
                background-color: #fefefe;
            }
            .infinite-list {
                height: 300px;
                .infinite-list-item {
                    padding: 15px 0;
                    border-top: 1px solid #ccc;
                    .user_pl {
                        margin-left: 18px;
                    }
                    .admin_hf {
                        margin-left: 18px;
                        margin-top: 10px;
                        border-radius: 5px;
                        padding: 10px;
                        background-color: #eee;
                    }
                }
            }
        }
    }
</style>
